<template>
  <div>

    <!-- logo -->
    <div style="padding-top: 3%">
      <img
        style="width: 140px; height: 50px"

        src="../../static/logo.png"
        alt=""
      />
    </div>

    <!-- 登录 -->

    <div style="padding-top: 3%">
      <div style="position: relative">
        <img
          style="height:60pvh; width: 100%"
          src="../../static/bj_login.png"
          alt=""
        />

        <div
          style="
            width: 400px;
            height: 400px;
            background-color: #ffffff;
            position: absolute;
            top: 7%;
            left: 60%;
          "
        >
          <!-- 登录选择 -->
          <div
            style="
              width: 90%;
              height: 90%;
              margin-left: 5%;
              margin-top: 5%;

              border-bottom: 1px solid #ccc;
              border-left: 1px solid #ccc;
              border-right: 1px solid #ccc;

            "
          >
            <el-tabs
              :stretch="true"
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
            >
            <!-- 注册 -->
              <el-tab-pane label="账号注册" name="first">
                <!-- 注册 -->
                <div style="padding-top: 2%; padding-left: 5%; width: 90%">

<el-form
:model="registers"
:rules="rules1"
ref="registersForm"
@submit.native.prevent="registerSumbit"
>
<!-- 用户名/手机号 -->
<div style="">
  <el-form-item prop="username">
 <div class="username" style="display: flex">
    <div style="background-color: #ccc;height: 40px;margin-top: 1px;">
    <i
      class="el-icon-user"
      style="
        font-size: 24px;

        padding-right: 10px;
        color: white;
        margin-left: 8px;
      "
    ></i>
   </div>

    <el-input
      v-model="registers.username"
      placeholder="手机号"
    ></el-input>

  </div>
   </el-form-item>

<!-- 密码 -->
<div class="" style="padding-top: 1%">
  <el-form-item prop="password">
    <div class="password" style="display: flex">
      <div style="background-color: #ccc;height: 40px;margin-top: 1px;">
        <i
          class="el-icon-lock"
          style="
            font-size: 24px;

            padding-right: 10px;
            color: white;
            margin-left: 8px;

          "
        ></i>
      </div>
      <el-input
        type="password"
        v-model="registers.password"
        show-password
        placeholder="请输入密码"
      ></el-input>
    </div>
  </el-form-item>
</div>

 <!-- 再一次确认密码 -->
 <div class="" style="padding-top: 1%">
  <el-form-item prop="okpassword">
    <div class="okpassword" style="display: flex">
      <div style="background-color: #ccc;height: 40px;margin-top: 1px;">
        <i
          class="el-icon-lock"
          style="
            font-size: 24px;

            padding-right: 10px;
            color: white;
            margin-left: 8px;

          "
        ></i>
      </div>
      <el-input
        type="password"
        v-model="registers.okpassword"
        show-password
        placeholder="请输入密码"
      ></el-input>
    </div>
  </el-form-item>
</div>

</div>

<!-- 注册按钮 -->
<div style="padding-top: 5%;">
  <el-button
    native-type="registerSumbit"
    style="width: 320px;font-size: 16px;letter-spacing: 1em;"
    :round="false"
    type="danger"
  >
    注册
  </el-button>
</div>
</el-form>

</div>
</el-tab-pane>

<!-- -------------登录界面----------- -->

              <el-tab-pane label="账号登录" name="second">
                <!-- 登录表格 -->
                <div style="padding-top: 2%; padding-left: 5%; width: 90%">

                  <el-form
                  :model="user"
                  :rules="rules"
                  ref="loginForm"
                  @submit.native.prevent="submit"
                >
                  <!-- 用户名/手机号 -->
                  <div style="">
                    <el-form-item prop="username">
                   <div class="username" style="display: flex">
                      <div style="background-color: #ccc;height: 40px;margin-top: 1px;">
                      <i
                        class="el-icon-user"
                        style="
                          font-size: 24px;

                          padding-right: 10px;
                          color: white;
                          margin-left: 8px;
                        "
                      ></i>
                     </div>

                      <el-input
                        v-model="user.username"
                        placeholder="手机号"
                      ></el-input>

                    </div>
                     </el-form-item>

                  <!-- 密码 -->
                  <div class="" style="padding-top: 1%">
                    <el-form-item prop="password">
                      <div class="password" style="display: flex">
                        <div style="background-color: #ccc;height: 40px;margin-top: 1px;">
                          <i
                            class="el-icon-lock"
                            style="
                              font-size: 24px;

                              padding-right: 10px;
                              color: white;
                              margin-left: 8px;

                            "
                          ></i>
                        </div>
                        <el-input
                          type="password"
                          v-model="user.password"
                          show-password
                          placeholder="请输入密码"
                        ></el-input>
                      </div>
                    </el-form-item>
                  </div>
                </div>

                  <!-- 记住我 -->
                  <div
                    style="
                      padding-top: 2%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; align-items: center; gap: 5px">
                      <el-checkbox v-model="user.rememberMe"></el-checkbox>
                      <span style="font-size: 14px">记住我</span>
                    </div>

                    <div style="font-size: 14px;color: #ccc;">忘记密码？</div>
                  </div>

                  <!-- 登录按钮 -->
                  <div style="padding-top: 5%;">
                    <el-button
                      native-type="submit"
                      style="width: 320px;font-size: 16px;letter-spacing: 1em;"
                      :round="false"
                      type="danger"
                    >
                      登录
                    </el-button>
                  </div>
                </el-form>

              <!-- 图标 +立即注册 -->
              <div style="padding-top: 10%;display: flex;justify-content: space-between;">
                  <div style="display: flex;gap: 5px;">
                    <img src="../../static/qq.png" alt="">
                    <img src="../../static/sina.png" alt="">
                    <img src="../../static/ali.png" alt="">
                    <img src="../../static/weixin.png" alt="">
                  </div>

                  <a href="javascript:void(0)" @click="register" style="color: #ccc;">立即注册</a>
                </div>
              </div>

              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

/* 修改悬停颜色 */
::v-deep .el-tabs__item.is-top {
  font-size: 20px;
}

::v-deep .el-input__inner {
  border-radius: 0 !important;
}
</style>

<script>

import { Login, registerUser } from '@/api/user.js'

export default {
  name: 'login_',

  data () {
    // 验证手机号规则
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'))
      }
      // 简单的手机号验证正则
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的手机号'))
      }
      callback()
    }

    // 验证密码规则
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      }
      if (value.length < 6) {
        return callback(new Error('密码长度不能少于6位'))
      }
      callback()
    }

    return {

      user: {
        username: '',
        password: '',
        rememberMe: true
      },
      registers: {
        username: '',
        password: '',
        okpassword: ''
      },

      activeName: 'second',
      // 表单验证规则
      rules: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      },

      // 注册表单验证

      rules1: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        okpassword: [
          {
            validator: (rule, value, callback) => {
              if (value !== this.registers.password) {
                callback(new Error('两次输入的密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {},
  methods: {

    // 登录
    async submit () {
      await this.$refs.loginForm.validate() // 验证是否输入正确
      const res = await Login(this.user)
      console.log(res)
      //  localStorage.setItem('token', res.data.token)
      if (res.code === 1) {
        // 写入token

        // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
        //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        // window.sessionStorage.setItem('token', res.data.token)
        this.$store.commit('m_token/setToken', res.data.token)
        this.$message.success('登录成功')

        this.$store.commit('m_user/setUsernameInfo', this.user.username)
        this.$router.push({
          path: '/home'

        })
      } else {
        this.$message.error(res.msg)
      }
    },
    handleClick (e) {
    //  console.log(e)
    },

    // 注册添加账号
    async registerSumbit () {
      await this.$refs.registersForm.validate()

      const res = await registerUser(this.registers)
      console.log(res)
      if (res.code === 1) {
        this.$message.success('账号注册成功')
        this.register('second')
      } else {
        this.$message.error(res.msg)
      }
    },

    // 立即注册
    register (name) {
      this.activeName = 'first' || name
    }
  }
}
</script>
